/* 动态渲染 */
/* 左边菜单栏 */
let menuDate = [
  { text: "空调" },
  { text: "电脑" },
  { text: "手机" },
  { text: "图书" },
  { text: "保健品" },
  { text: "口罩" },
  { text: "电磁炉" },
  { text: "电热水壶" },
  { text: "除菌液" },
  { text: "休闲零食" },
  { text: "充电宝" },
  { text: "体温计" },
  { text: "投影机" },
  { text: "游戏机" },
  { text: "夹克" },
  { text: "T恤" },
  { text: "休闲鞋" },
  { text: "皮鞋" },
  { text: "跑步机" },
  { text: "书签" },
]
let menu = document.querySelector(".menu");
function menuHtml () {
  let strHtml = "";
  menuDate.forEach((item, i) => {
    strHtml += `
    <li class="menu-item">${menuDate[i].text}</li>
    `
  })
  menu.innerHTML = strHtml;
}
menuHtml();
menu.children[0].classList.add("activate")

/* 右边菜单对应的内容 */
let shopDate = [
  { text: "空调", src: "item1.jpg" },
  { text: "电脑", src: "item2.png" },
  { text: "手机", src: "item3.png" },
  { text: "图书", src: "item4.jpg" },
  { text: "保健品", src: "item5.jpg" },
  { text: "口罩", src: "item6.jpg" },
  { text: "电磁炉", src: "item7.jpg" },
  { text: "电热水壶", src: "item8.jpg" },
  { text: "除菌液", src: "item9.jpg" },
  { text: "休闲零食", src: "item10.jpg" },
  { text: "充电宝", src: "item11.jpg" },
  { text: "体温计", src: "item12.jpg" },
  { text: "投影机", src: "item13.jpg" },
  { text: "游戏机", src: "item14.jpg" },
  { text: "夹克", src: "item15.jpg" },
  { text: "T恤", src: "item16.jpg" },
  { text: "休闲鞋", src: "item17.jpg" },
  { text: "皮鞋", src: "item18.jpg" },
  { text: "跑步机", src: "item19.jpg" },
  { text: "书签", src: "item20.jpg" },
]

let commodityUl = document.querySelector(".commodity-ul");
let menuItems = document.querySelectorAll(".menu-item");
arr(shopDate[0]);

menuItems.forEach((menuItem, index) => {
  menuItem.addEventListener("click", () => {
    item = shopDate[index];
    arr(item);
    menuItems.forEach((item) => {
      item.classList.remove("activate");
    })
    menuItem.classList.add("activate");
  })
})

function arr (item) {
  let strHtml = "";
  for (let i = 0; i < 24; i++) {
    strHtml += `
  <li class="commodity-li ">
  <div class="li-img">
    <img src="./images/${item.src}" alt="">
  </div>
  <span>${item.text}</span>
</li>`
  }
  commodityUl.innerHTML = strHtml;
}